<template>
    <div class="">
           <a-pagination
      show-size-changer
      v-model:current="page.current"
      v-model:pageSize="page.pageSize"
      :total="total"
    />
    </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
    name:'',
    props:{
        total:{
            type:Number,
            default:()=>0
        }
    },
    emits:{
        updatePageSize:null,
        updateCurrentPage:null
    },
    setup(props,{emit}){
        var page=reactive({
            pageSize:20,
            current:1,
        })


    watch(()=>page.pageSize, () => {
      console.log('pageSize', page.pageSize);
      emit('updatePageSize',{pageSize:page.pageSize,current:page.current})
    });
    watch(()=>page.current, () => {
      console.log('current', page.pageSize);
      emit('updateCurrentPage',{pageSize:page.pageSize,current:page.current})
    });
        return {
            page,

        }
    }
}
</script>

<style>

</style>